/* Checkbox */

/* File is used in light mode. DO NOT oversize it */

.checkboxOn input[type="checkbox"],
.checkboxOff input[type="checkbox"] {
    margin: 0;
    padding: 0;
    opacity: 0;
    cursor: pointer;
}
.checkboxOn {
    background: var(--checkbox-fill-active);
}
.checkboxOff {
    background: var(--checkbox-fill-inactive);
    box-shadow: inset 0 0 0 1px var(--checkbox-border-inactive);
}
.checkboxOn,
.checkboxOff {
    width: 16px;
    height: 16px;
    box-sizing: border-box;
    cursor: pointer;
    margin-inline-end: 11px;
    border-radius: 3px;
    position: relative;
    z-index: 1;
    vertical-align: middle;
    display: inline-block;
}
.checkboxOn.v-top,
.checkboxOff.v-top {
    vertical-align: top;
    margin-top: 6px;
}
.checkboxOn input,
.checkboxOff input {
    display: block;
    height: 100%;
    width: 100%;
}
.checkboxOn.small, .checkboxOff.small {
    width: 14px;
    height: 14px;
    margin: 0 11px 0 0;
}
.checkbox-block {
    display: flex;
}
.checkbox-txt {
    font: var(--text-body1);
    color: var(--text-color-medium);
    padding-inline-end: 28px;
    max-width: calc(100% - 31px);
    box-sizing: border-box;
    display: inline-block;
    transition: 0.3s;
    vertical-align: middle;
}

.checkboxMinimize::before,
.checkboxOn::before {
    background-repeat: no-repeat;
    background-size: 100%;
    display: block;
    content: '';
    width: var(--icon-size, 16px);
    height: var(--icon-size, 16px);
    position: absolute;
    top: 0;
    bottom: 0;
}

.theme-light .checkboxOn::before,
.theme-light-forced .checkboxOn::before {
   background-image: url("../images/sprites/fm-theme@light.svg#icon-checkbox-on");
}

.theme-dark .checkboxOn::before,
.theme-dark-forced .checkboxOn::before {
   background-image: url("../images/sprites/fm-theme@dark.svg#icon-checkbox-on");
}

.theme-light .checkboxMinimize::before,
.theme-light-forced .checkboxMinimize::before {
   background-image: url("../images/sprites/fm-theme@light.svg#icon-checkbox-minimize");
}

.theme-dark .checkboxMinimize::before,
.theme-dark-forced .checkboxMinimize::before {
   background-image: url("../images/sprites/fm-theme@dark.svg#icon-checkbox-minimize");
}
